<template>
    <div class="brand">
        <div class="head">
            <van-nav-bar
            title="标题"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="contentbox"
        >
            <router-link tag="div" v-for="item in brandlist" :key="item.id" :to="`/brand/detailaction?id=${item.id}`" class="list">
                <img :src="item.app_list_pic_url" alt="">
                <p class="desc">
                    <span>{{item.name}}</span>
                    <span> | </span>
                    <span>{{item.floor_price}}元起</span>  
                </p>
            </router-link>
        </van-list>


    </div>
</template>

<script>
import {Blistaction} from '@/api/home/brand'
    export default {
        data() {
            return {
                brandlist:[],
                loading: false,
                finished: false,
                page:1
            }
        },
        created() {
            Blistaction({
                id:this.page
            })
            .then(res=>{
                // console.log(res);
                this.brandlist=res.data
            })
        },
        methods:{
             onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            
            },
            onLoad(){
                    Blistaction({
                    page: this.page+1
                })
                .then(res =>{
                    this.brandlist.push(...res.data);
                    this.page+=1;
                    this.loading = false;
                    // 获取最后一页得数据得时候 禁止加载数据
                    if(res.total == this.page-1){
                        this.finished = true;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox{
    margin-top: 50px;
}

.list{
    width: 100%;
    position: relative;

    img{
        display: block;
        width: 100%;
        height: 210px;
        margin-bottom: 5Px;
    }

    .desc{
        text-align: center;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        
        span{
            color: #fff;
            font-size: 18px;
            font-weight: 700;
        }
    }
}
</style>